<template>
  <div class="header">
    <div class="header-box">
      <div class="header-left" @click="goHome">
        <div class="logo"><img src="@/assets/images/logo.png"/></div>
        <div class="title">数据查询系统</div>
      </div>
      <div class="header-right">
        <div class="collect" @click="goCollect">我的收藏</div>
        <div class="user-info">
          <i class="el-icon-user"></i>
          <span>{{userInfo.name}}</span>
        </div>
        <div class="login-out" @click="signOUt">
          <i class="el-icon-switch-button"></i>
          <span>退出</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "v-header",
    data() {
      return {
        userInfo: {}
      }
    },
    created() {
      if(sessionStorage.getItem("userInfo")) {
        this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      }
    },
    methods: {
      goHome() {
        if(this.$route.path !== '/schoolInfo') {
          this.$router.push({
            path: '/schoolInfo',
          });
        }
      },
      goCollect() {
        if(this.$route.path !== '/myCollect') {
          this.$router.push({
            path: '/myCollect',
          });
        }
      },
      // 退出登录
      signOUt() {
        this.cleanSession();
        this.$router.push('/login');
      },
      cleanSession() {
        if(sessionStorage.getItem("userInfo")) {
          sessionStorage.removeItem("userInfo");
        }
        if(sessionStorage.getItem("token")) {
          sessionStorage.removeItem("token");
        }
      },
    }
  }
</script>

<style lang="stylus">
  .header
    .school-type
      .el-input__inner
        text-align right
        color #fff
        background #E65A1E
        border #fff

      .el-input__prefix, .el-input__suffix
        color #fff

      .el-select .el-input .el-select__caret
        color #fff

    .header-right
      .el-button--primary:focus, .el-button--primary:hover
        background-color: #E65A1E;
        border-color: #E65A1E;

      .el-dropdown-selfdefine
        color #fff
</style>
<style scoped lang="stylus">
  .header
    width: 100%;
    height: 46px;
    position: fixed;
    top: 0;
    font-size: 18px;
    z-index: 5;
    background-color: #E65A1E;

    .header-box
      display flex
      width 80%
      height 48px
      margin 0 auto

      .header-left
        flex 1
        width 100%
        height 46px
        display flex
        align-items center
        cursor pointer

        .logo
          width: 53px;
          padding: 12px 0;

          img
            width 100%
            height 100%

        .title
          padding 0 10px
          font-size 18px
          color #fff

        .school-type
          width 155px
          background #E65A1E

      .header-right
        flex 1
        width 100%
        height 46px
        display flex
        align-items center
        justify-content flex-end
        color #fff

        .collect
          margin 0 10px
          padding 10 0
          line-height 28px
          font-size 14px
          cursor pointer
        .user-info
          margin 0 10px
          padding 10 0
          line-height 28px
          >span
            font-size 14px
            margin-left 3px
            vertical-align middle

        .login-out
          margin 0 10px
          padding 10 0
          line-height 28px
          cursor pointer
          >span
            font-size 14px
            margin-left 3px
            vertical-align middle

        .manager
          font-size 14px
          color #fff
          cursor pointer


</style>